﻿
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <script type="text/javascript" src="/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/css" src="/css/bootstrap.min.css"></script>
    <script type="text/javascript" src="/lib/lightbox2/2.8.1/js/lightbox-plus-jquery.js"></script>
    <script type="text/javascript" src="/lib/ueditor/1.4.3/third-party/jquery-1.10.2.js"></script>
    <link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/style.css" />
    <script type="text/javascript" src="/lib/respond.min.js"></script>
<!--    <script>DD_belatedPNG.fix('*');</script>-->
    <title>商品列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 新手引导 <span
        class="c-gray en">&gt;</span> 商品列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                               href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div style="width: 18%;height: 100%;float: left;border: red solid 1px">
<div><span style="font-size: 18px">商品分类</span></div>
</div>
<div class="page-container" style="float: left;border: #1e97f7 1px solid;width: 78%;height: 96%">
    <div class="text-c">
        <input type="text" class="input-text" style="width:250px;margin-left: 1000px" placeholder="输入编号、名称、规格、属性" id="poKeyword" name="poKeyword">
        <button type="submit" class="btn btn-success" id="findempl" name=""><i class="Hui-iconfont">&#xe665;</i>搜索</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
                 <button  id="deleteall" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</button>
           <button id="addcommditybtn" class="btn btn-primary radius"> <i class="Hui-iconfont">&#xe600;</i> 添加商品</button>
        <a href="javascript:;" onclick="exportexcel()" class="btn btn-danger radius" >
        <i class="Hui-iconfont">&#xe644;</i> Excel导出</a>
    </span>
        <span class="r">共有数据：<strong id="strong"></strong> 条</span></div>
      <div><span>所属分类:</span><span style="color: #0e90d2"> 商品分类></span><span style="color: #9a6a00">默认分类</span></div>
    <hr>
    <div id="app" style="overflow: scroll;height: 500px"  >
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr>
                <th scope="col" colspan="9">商品列表</th>
            </tr>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value="" id="checkAll"></th>
                <th width="40">序号</th>
                <th width="130">移动</th>
                <th width="130">操作</th>
                <th width="100">编号</th>
                <th width="80">名称</th>
                <th width="80">基本单位</th>Q
                <th width="80">零售价(元)</th>
                <th width="80">规格</th>
            </tr>
            </thead>
            <tbody  class="tbody tb1">
            <tr class="text-c" v-for="(item,index) in result">
                <td><input type="checkbox"   id="box_" :value="item.id"></td>
                <td>{{index+1}}</td>
                <td width="150">
                    <button class="btn btn-primary Btn top"  id ="btntop" name="saveBtn"> <i class="icon Hui-iconfont">&#xe679;</i></a></button>
                 <button  class="btn btn-primary Btn up" id="btnup" name="saveBtn"><i class="icon Hui-iconfont">&#xe6d6;</i></a></button>
                   <button  class="btn btn-primary Btn down"  id="btndown" name="saveBtn" > <i class="icon Hui-iconfont">&#xe6d5;</i></a></button>
                  <button   class="btn btn-primary Btn stick"  id="btnstick"><i class="icon Hui-iconfont">&#xe674;</i></a></button>
                </td>
                <td class="td-manage">
                    <a title="详情" href="javascript:;" @click="xiangEventcommdity(item.id)" class="ml-5" style="text-decoration:none"> <i class="icon Hui-iconfont">&#xe627;</i></a>
                    <a title="编辑" href="javascript:;" @click="editEventcommdity(item.id)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
                    <a title="删除" href="javascript:;" @click="deleteEventcommdity(item.id)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
                </td>
                <td>{{item.clNumber}}</td>
                <td>{{item.clName}}</td>
                <td>{{item.clUnit}}</td>
                <td>{{item.clTagPrise}}</td>
                <td>{{item.clSpec}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="pagenav" style="text-align:center;position: fixed;left: 0px;bottom :50px;width: 100%;height: 50px"></div>
</div>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el : '#app',
        data : {
            result : []
        }
    });
    //查询商品数据
    var getCommdityPageList = function(curr) {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "/basicdata/commodity-list/getpage",
                data : {
                    current:curr || 1,
                    size:4,
                },
                success : function(msg) {
                    $("#strong").html(msg.total);
                    app.result=msg.comlist;
                    laypage({
                        cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                        pages : msg.pages, //总页数
                        first : '首页',
                        last : '尾页',
                        curr : curr || 1, //当前页
                        jump : function(obj, first) { //触发分页后的回调
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                getCommdityPageList(obj.curr);
                            }
                        }
                    });
                }
            });
        }
    getCommdityPageList();
   /*模糊查询*/
    $("#findempl").click(function () {
        $.ajax({
            type:'POST',
            dataType:'json',
            url:"/basicdata/commodity-list/vaguelist",
            data:{
                poKeyword:$("#poKeyword").val(),
            },
            success:function (dd) {
                app.result=dd.data;
            }
        });
    })
    /*增加商品*/
   $("#addcommditybtn").click(function () {
       layer.open({
           type:2,
           title:'添加商品',
           fix:false,
           maxmin:true,
           shadeClose:true,
           area:['1500px','900px'],
           content:'/basicdata/commodity-list/addcommlist',
           end:function() {
               getCommdityPageList();
           }
       });
   });
    //编辑商品事件
    var editEventcommdity=function (id) {
        layer.open({
            type : 2,
            title : '编辑商品',
            fix : false,
            maxmin : true,
            shadeClose : true,
            area : [ '1500px', '900px' ],
            content : '/basicdata/commodity-list/selectcommditybyid?id='+id,
            end : function() {
                getCommdityPageList();
            }
        });
    };
    /*商品详情*/
  var xiangEventcommdity =function (id) {
      $.ajax({
          type:'post',
          datatype:'json',
      })
      window.location.href='/basicdata/commodity-list/detailcommodity?id='+id;
   }
    /**
     * 导出excel
     */
   var exportexcel=function () {
    window.location.href="/basicdata/commodity-list/getExcel";
   }
   // 批量删除
    $(function () {
        $("#checkAll").click(function () {
            $("input[id^='box_']").attr("checked",this.checked);
        })
        $("input[id^='box_']").click(function(){//点击每一个子checkbox，都会触发这个事件
            /**获取到下面所有checkbox*/
            var boxs = $("input[id^='box_']");
            $("#checkAll").attr("checked",boxs.filter(":checked").length == 2);
        });
    });
    $("#deleteall").click(function(){
        /**获取下面选中的checkbox*/
        var checkedbox = $("input[id^='box_']:checked");
        if(checkedbox.length == 0){
            alert("请选择要删除的商品！！！");
        }else{
            if(confirm("你确定要删除吗？？？")){
                var ids = new Array();
                checkedbox.each(function(){
                    ids.push(this.value);
                });
                $.ajax({
                    type:'POST',
                    dataType:'json',
                    contentType: 'application/json',
                    url:'/basicdata/commodity-list/deletall',
                    data:JSON.stringify(ids),
                    success: function (msg){
                        getCommdityPageList();
                        if (msg){
                            layer.msg('成功删除',{icon:5});
                        }
                    }
                })
            }
        }
    })
    getCommdityPageList();
    /*单个删除*/
    var deleteEventcommdity = function(id) {
        //询问框
        layer.confirm('您确定要删除么？', {
            btn : [ '是', '否' ]
            //按钮
        }, function() {
            //是
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "/basicdata/commodity-list/deleteComm",
                data : {
                    id:id
                },
                success : function(msg) {
                    getCommdityPageList();
                    layer.msg('已经成功删除记录' + id,{icon:5});
                }
            });
        }, function() {
            //否
        });
    }
    $(function() {
        //上移
        var $up = $(".up");
        $up .click(function () {
            var $tr = $(this).parents('#app .table-bg> tbody > tr');
            if ($tr.index() != 0) {
                $tr.fadeOut().fadeIn();
                $tr.prev().before($tr);
            }
        });
        //下移
      var $down = $(".down");
        var len = $down.length;
        $down.click(function () {
            var $tr = $(this).parents('#app .table-bg> tbody > tr');
            if ($tr.index() != len - 1) {
                $tr.fadeOut().fadeIn();
                $tr.next().after($tr);
            }
        });
        //置顶
     var $top = $(".top");
        $top.click(function () {
            var $tr = $(this).parents('#app .table-bg> tbody > tr');
            $tr.fadeOut().fadeIn();
            $(".tb1").prepend($tr);
            $tr.css("color", "#f60");
        });
        //置底
       var $stick= $(".stick");
        $stick.click(function () {
            var $tr = $(this).parents('#app .table-bg> tbody > tr');
            $tr.fadeOut().fadeIn();
            $(".tb1").append($tr);
            $tr.css("color", "#f60");
        });
    });


</script>
</body>
</html>